<template>
  <div>
    <van-cell-group>
      <van-cell :value="info.kcname" title="课程名称"/>
      <van-cell :value="info.name" title="教师名称"/>
    </van-cell-group>
    <div class="item">
      <div class="top-time">
        <div class="title">上课记录</div>
        <div class="times">
          <span class="time" @click="toShow('start')">{{ displayTime.start }}</span>
          <span>至</span>
          <span class="time" @click="toShow('end')">{{ displayTime.end }}</span>
        </div>
      </div>
      <van-cell-group>
        <van-cell v-for="(item, index) in list" :key="index" :value="item.status === 1 ? '已签到' : (item.status === 2 ? '请假' : '未签到')" :title="item.timeStr"/>
      </van-cell-group>
    </div>
    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker
        v-model="date"
        type="date"
        @cancel="showDate = false"
        @confirm="dateConfirm"/>
    </van-popup>
  </div>
</template>

<script>
import api from '@/api'
import {birthdayHandle, getWeekDate} from '@/utils'
export default {
  name: 'course-detail',
  data () {
    return {
      info: {
        id: '',
        name: '',
        kcname: ''
      },
      list: [],
      displayTime: {
        start: '',
        end: ''
      },
      showDate: false,
      date: '',
      type: '',
      start: 0,
      end: 0
    }
  },
  methods: {
    getInfo (times) {
      let params = {
        id: this.$route.query.id,
        student_id: this.$route.query.sid
      }
      if (times) {
        params.ktime = times[0]
        params.jtime = times[1]
      }
      api.platformStudentCourse({
        params,
        callback: res => {
          if (res.data.error_code === 0) {
            Object.keys(this.info).forEach(key => {
              this.info[key] = res.data.data.kech[key]
            })
            this.list = res.data.data.record
            this.list.forEach(item => {
              item.timeStr = birthdayHandle(new Date(Number(item.sktime) * 1000)).split('-').join('.')
            })
          }
        }
      })
    },
    dateConfirm () {
      this.showDate = false
      this[this.type] = Math.floor(this.date.valueOf() / 1000)
      this.displayTime[this.type] = birthdayHandle(this.date).split('-').join('.')
      this.getInfo([this.start, this.end])
    },
    toShow (type) {
      this.type = type
      this.date = new Date(Number(this[type]) * 1000)
      this.showDate = true
    }
  },
  created () {
    this.getInfo()
    let weeks = getWeekDate()
    this.start = Math.floor(new Date(weeks[0]).valueOf() / 1000)
    this.end = Math.floor(new Date().valueOf() / 1000)
    this.displayTime.start = weeks[0].split('/').join('.')
    this.displayTime.end = birthdayHandle(new Date()).split('-').join('.')
  }
}
</script>

<style scoped>
  .item{
    border-top: 10px solid #f2f2f2;
  }
  .top-time{
    display: flex;
    padding: 10px 16px;
    height: 40px;
    align-items: center;
  }
  .top-time .title{
    color: #2D2D2D;
    font-family: PingFangBlod;
    margin-right: 16px;
  }
  .top-time .time{
    border: 1px solid rgba(112,112,112,1);
    border-radius: 8px;
    padding: 8px;
  }
  .van-cell div:nth-child(2) span{
    color: #2D2D2D;
  }
</style>
